"Responsive Gallery with simple css"
Bootstrap 3.0.0 Snippet by Rajnesh Prajapati

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>responsive gallery</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="col-sm-12"> <!-- Grid row --> <div class="gallery" > <img src="https://via.placeholder.com/1000x800" class="img-responsive thumbnail" alt="responsive gallery" /> <img src="https://via.placeholder.com/1000x1500" class="img-responsive thumbnail" alt="responsive gallery" /> <img src="https://via.placeholder.com/2500x2500" class="img-responsive thumbnail" alt="responsive gallery" /> <img src="https://via.placeholder.com/1000x1500" class="img-responsive thumbnail" alt="responsive gallery" /> <img src="https://via.placeholder.com/1000x800" class="img-responsive thumbnail" alt="responsive gallery" /> <img src="https://via.placeholder.com/2000x1500" class="img-responsive thumbnail" alt="responsive gallery" /> <img src="https://via.placeholder.com/2500x2500" class="img-responsive thumbnail" alt="responsive gallery" /> <img src="https://via.placeholder.com/500x1000" class="img-responsive thumbnail" alt="responsive gallery" /> <img src="https://via.placeholder.com/1000x800" class="img-responsive thumbnail" alt="responsive gallery" /> <img src="https://via.placeholder.com/1000x1500" class="img-responsive thumbnail" alt="responsive gallery" /> <img src="https://via.placeholder.com/2500x2500" class="img-responsive thumbnail" alt="responsive gallery" /> <img src="https://via.placeholder.com/1000x1500" class="img-responsive thumbnail" alt="responsive gallery" /> <img src="https://via.placeholder.com/1000x800" class="img-responsive thumbnail" alt="responsive gallery" /> <img src="https://via.placeholder.com/2000x1500" class="img-responsive thumbnail" alt="responsive gallery" /> <img src="https://via.placeholder.com/2500x2500" class="img-responsive thumbnail" alt="responsive gallery" /> <img src="https://via.placeholder.com/500x1000" class="img-responsive thumbnail" alt="responsive gallery" /> </div> <!-- Grid column --> </div> </div> <script type="text/javascript"> </script> </body> </html>
.gallery { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-width: 33%; -moz-column-width: 33%; column-width: 33%; }

Related: See More

Material Dashboard React
arrow key navigation thumbnail gallery modal view
Simple Vertical timeline
Simple white navbar

Questions / Comments: